<!-- components/Login.vue -->
<template>
    <div>
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <h2 class="title">Login or Register</h2>
                    <p class="subtitle error-msg">{{ errorMsg }}</p>
                </div>
            </div>
        </section>
        <section class="section">
            <div class="container">
                <div class="field">
                    <label class="label is-large" for="email">Email:</label>
                    <div class="control">
                        <input type="email" class="input is-large" id="email" v-model="email" />
                    </div>
                </div>
                <div class="field">
                    <label class="label is-large" for="password">Password:</label>
                    <div class="control">
                        <input
                            type="password"
                            class="input is-large"
                            id="password"
                            v-model="password"
                        />
                    </div>
                </div>

                <div class="control">
                    <a class="button is-large is-primary" @click="authenticate">Login</a>
                    <a class="button is-large is-success" @click="register">Register</a>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { EventBus } from "@/utils";

export default {
    data() {
        return {
            email: "",
            password: "",
            errorMsg: ""
        };
    },
    methods: {
        authenticate() {
            this.$store
                .dispatch("login", {
                    email: this.email,
                    password: this.password
                })
                .then(() => this.$router.push("/"));
        },
        register() {
            this.$store
                .dispatch("register", {
                    email: this.email,
                    password: this.password
                })
                .then(() => this.$router.push("/"));
        }
    },
    mounted() {
        EventBus.$on("failedRegistering", msg => {
            this.errorMsg = msg;
        });
        EventBus.$on("failedAuthentication", msg => {
            this.errorMsg = msg;
        });
    },
    beforeDestroy() {
        EventBus.$off("failedRegistering");
        EventBus.$off("failedAuthentication");
    }
};
</script>
